<template>
	<view class="safe-area-inset-bottom">
		<uni-card>
			<p class="grid-integral">合同类型：{{contractBusinessTypeList.contractTypeName}}</p>
			<p class="grid-integral">业务类型：{{contractBusinessTypeList.name}}</p>
			<view class="manage_view mb-2">
				<span class="name">管理员：</span>
				<custom-tree-select mutiple dataLabel="label" :childernDisabled="true" placeholder="请选择模板管理员" :listData="deptOptions" v-model="contractBusinessTypeList.manageIds==''?null:contractBusinessTypeList.defaultManage" style="width: 100%;" @remove="deleteDep" @confirm="confirmSelect" :choseParent="false"/>
			</view>
		</uni-card>
		
		<!-- 普通合同显示 -->
		<uni-card>
			<template slot="title">
				<view class="flex_between normarl-tit">
				  <view>普通合同</view>
				  <span class="setting" @click="updateInitiation(contractBusinessTypeList,1)">设置</span>
				</view>  
			</template>
			<view class="grid-integral mb-2">
				<view class="name">发起人：</view>
			<span v-if="!!contractBusinessTypeList.contractSignProcessFileId" class="indext">
			    <span v-for="(user,index) in contractBusinessTypeList.contractSignProcessFileStartNames">{{user.label}}
				   <span v-show="index < contractBusinessTypeList.contractSignProcessFileStartNames.length - 1">；</span>
			    </span>
			</span>
			    <span v-else class="indext">{{$store.getters.companyInfo.name}}</span>              
			</view>
			<view class="grid-integral mb-2">
				<view class="name">签约文件：</view>
				<view class="indext">发起签约时，请上传本地Word文件，需本地编辑完善</view>
			</view>
			<view class="flex_item">
			<view class="grid-integral">签署要求：</view>
			<view>
				<view>
				<view class="check_label">发起方</view>				
				<checkbox-group class="status_sign">
					<view>
					<label><checkbox checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
					</view>
					<label><checkbox :checked="contractBusinessTypeList.contractSignProcessFileDTO.isCompanySign == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
				</checkbox-group>				
				</view>
				<view style="margin-top:10rpx;">
					<view class="check_label">企业接收方</view>
					<checkbox-group class="status_sign">
						<view>
						<label><checkbox value="0" checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
						</view>
						<label><checkbox :checked="contractBusinessTypeList.contractSignProcessFileDTO.isCompanySignReceive == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
					</checkbox-group>
				</view>
				<view style="margin-top:10rpx;"> 
					<view class="check_label">个人接收方</view>
					<checkbox-group class="status_sign">
						<view>
						<label><checkbox :checked="contractBusinessTypeList.isPersonSign[0] == 1 || contractBusinessTypeList.isPersonSign[1] == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />标准签字章</label>
						</view>
						<label><checkbox :checked="contractBusinessTypeList.isPersonSign[0] == 0 || contractBusinessTypeList.isPersonSign[1] == 0?true:false" color="#00a660" style="transform:scale(0.7)" disabled />手写签字章</label>
						
					</checkbox-group>	
				</view>
			</view>
			</view>
			<view class="grid-integral mb-2" style="margin-bottom:6rpx;">
				<view class="name">签署人：</view>
			<span v-if="!!contractBusinessTypeList.contractSignProcessFileId">
			    <span v-for="(user,index) in contractBusinessTypeList.contractSignProcessFileDTO.contractSignProcessUseList">
			        <span v-if="user.isStarter==0">{{user.label}}
			            <span v-if="contractBusinessTypeList.contractSignProcessFileDTO.isCompanySign==1">盖印章及签字章</span>
			            <span v-else>仅盖印章</span>；</span>
			      </span></span>
			<span v-else>{{$store.getters.staffInfo.adminName}}（企业管理员）仅盖印章</span>
			</view>
		</uni-card>
		
		<!-- 标准合同 -->
		<uni-card>
			<template slot="title">
				<view class="flex_between normarl-tit" style="background: rgb(245, 154, 35);">
				  <view>标准合同</view>
				  <span class="setting" @click="updateInitiation(contractBusinessTypeList,0)">设置</span>
				</view>
			</template>
			<view class="grid-integral mb-2"><span class="name">发起人：</span>
			<span v-if="!!contractBusinessTypeList.contractSignProcessTemplateId" class="indext">
			    <span v-for="(user,index) in contractBusinessTypeList.contractSignProcessTemplateStartNames">{{user.label}}
				<span v-show="index < contractBusinessTypeList.contractSignProcessTemplateStartNames.length - 1">；</span>
			      </span></span>
			    <span v-else  class="indext">{{$store.getters.companyInfo.name}}</span>              
			</view>
			<!--  -->
			<view class="grid-integral mb-2"><span class="name">签约文件：</span>
			  <span class="indext" v-if="!contractBusinessTypeList.contractTemplateNamesAndIds">发起签约时，请使用标准合同模板，需系统内编辑完善</span>
			  <template v-else>
				<span v-for="(template,index) in contractBusinessTypeList.contractTemplateNamesAndIds" class="indext">{{ template.name }}</span>
			  </template>
			</view>
			<view class="flex_item"> 
			<p class="grid-integral">签署要求：</p>
			<view>
				<view>
				<view class="check_label">发起方<span v-if="contractBusinessTypeList.contractSignProcessTemplateSignNames == ''">：</span></view>
				    <span v-if="contractBusinessTypeList.contractSignProcessTemplateSignNames == ''" class="text_span">使用标准合同模板设置的签署要求</span>
				<checkbox-group class="status_sign" v-else>
					<view>
					<label><checkbox value="0" checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
					</view>
					<label><checkbox :checked="contractBusinessTypeList.contractTemplateSignSet == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
				</checkbox-group>
				</view>
				<view style="margin-top:10rpx;">
					<view class="check_label">企业接收方<span v-if="contractBusinessTypeList.contractSignProcessTemplateSignNames == ''">：</span></view>
					<span v-if="contractBusinessTypeList.contractSignProcessTemplateSignNames == ''" class="text_span">使用标准合同模板设置的签署要求</span>
					<checkbox-group class="status_sign" v-else>
						<view>
						<label><checkbox value="0" checked="true" color="#00a660" style="transform:scale(0.7)" disabled />企业印章</label>
						</view>
						<label><checkbox :checked="contractBusinessTypeList.contractTemplateSignSet == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />授权人签字章</label>
					</checkbox-group>	
				</view>
				<view style="margin-top:10rpx;">
					<view class="check_label">个人接收方<span v-if="contractBusinessTypeList.contractSignProcessTemplateSignNames == ''">：</span></view>
					<span v-if="contractBusinessTypeList.contractSignProcessTemplateSignNames == ''" class="text_span">使用标准合同模板设置的签署要求</span>
					<checkbox-group class="status_sign" v-else>
						<view>
							<label><checkbox :checked="contractBusinessTypeList.contractTemplateSignPerson[0] == 1 || contractBusinessTypeList.contractTemplateSignPerson[1] == 1?true:false" disabled color="#00a660" style="transform:scale(0.7)" />标准签字章</label>
						
						</view>
						<label><checkbox :checked="contractBusinessTypeList.contractTemplateSignPerson[1] == 0 || contractBusinessTypeList.contractTemplateSignPerson[0] == 0?true:false" color="#00a660" style="transform:scale(0.7)" disabled />手写签字章</label>
					</checkbox-group>	
				</view>
			</view>
			</view> 
			<view class="grid-integral mb-2" style="margin-bottom:6rpx;" v-if="contractBusinessTypeList.contractSignProcessTemplateDTO">
			<span class="name">签署人：</span>
			<span v-if="!!contractBusinessTypeList.contractSignProcessTemplateDTO.contractTemplateIds" class="indext">
			    <span v-for="(user,index) in contractBusinessTypeList.contractSignProcessTemplateDTO.contractSignProcessUseList">
			      <span v-if="user.isStarter==0">{{user.label}}
			        <span v-if="contractBusinessTypeList.contractTemplateSignSet==1">盖印章及签字章</span>
			        <span v-else>仅盖印章</span>；</span>
			    </span></span>
				<span v-else class="indext">{{$store.getters.staffInfo.adminName}}（企业管理员）仅盖印章</span>
			</view>
		</uni-card>
		
		<uni-card>
			<template slot="title">
				<view class="flex_between normarl-tit" style="background: #9a9a9a;">
				  <view>合同水印</view>
				  <span class="setting" @click="waterSetting">设置</span>
				</view>
			</template>
			    <span v-if="!!contractBusinessTypeList.contractWaterMarkName" class="indext">{{ contractBusinessTypeList.contractWaterMarkName }}</span>
			    <span v-else class="indext">电子签约基础数据水印
			        <span class="sp-ol">（由签约文件二维码、合同编号、文件页码水印组成）</span>
			    </span>
				<span size="mini" class="waterBtn" @click="handleEdit">编辑模板</span>
				<span class="sp-ol" v-if="!!contractBusinessTypeList.contractWaterMarkName">电子签约基础数据水印：由签约文件二维码、合同编号、文件页码组成</span>
		</uni-card>	
		
		<!-- 水印设置弹窗 -->
		<uni-popup ref="waterPopup" background-color="#fff">
			<view class="popup-content">
				<view class="water-title">选择水印</view>
				  <uni-table ref="table" :loading="loading" stripe emptyText="暂无更多数据" style="margin-top: 50rpx;">
					<uni-tr>
						<uni-th width="150" align="center">水印名称</uni-th>
						<uni-th width="150" align="center">合同类型</uni-th>
						<uni-th width="50" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="item,index in templateList" :key="index">
						<uni-td align="center">{{ item.name }}</uni-td>
						<uni-td v-if="item.contractTypeName" align="center">{{ item.contractTypeName }}</uni-td>
						<uni-td v-else align="center">全部类型</uni-td>
						<uni-td>
							<span class="themeColor" @click="useWater(item)">使用</span>
							<span class="warningColor" @click="handleWater(item)">编辑</span>
						</uni-td>					
					</uni-tr>
				  </uni-table>	
			</view>
		</uni-popup>
		
	 </view>
</template>

<script>
	import { listByIsSystemAndContractType } from "@/api/ec/console/busiConfig/waterMark";
	import {uniqueArr} from "@/utils";
	import { listDTOContractBusinessType, updateContractBusinessType} from "@/api/ec/console/busiConfig/contractBusinessType";
	import {treeSelectAndStaff} from "@/api/ec/console/org/dept";
	import {listByCompanyId} from "@/api/ec/console/busiConfig/contractType";
	export default {
		data() {
			return {
				loading: false,//表格加载
				templateList:[],//水印模板
				deptOptions:[], //部门数据 
				activeNames:['0','1'],
				contractType:[], //类型
				// 合同类型列表
				contractBusinessTypeList: {
					contractSignProcessFileDTO:{},
					isPersonSign:[], //0手写 1标准
					contractTemplateSignPerson:[],
				}, 
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				  name: null,
				  contractTypeId: null,
				  status: null,
				},
				id:'',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getList(option.id)
			// 获取合同类型
			this.getContractType()
			// 部门员工数据 
			this.initDept()
		},
		methods: {
			/** 选择管理员 */
			confirmSelect(e){
				let manageIds = []
				e.forEach(item=>{
					manageIds.push(item.id)
				})
				// 如果数据没有修改
				updateContractBusinessType({id:this.contractBusinessTypeList.id,manageIds:manageIds.join(",")}).then(response => {
				  this.$modal.msgSuccess("修改成功");
				});   
			},
			deleteDep(e){
				updateContractBusinessType({id:this.contractBusinessTypeList.id,manageIds:e}).then(response => {
				  this.$modal.msgSuccess("修改成功");
				});
			},
			/** 使用水印模板 */
			useWater(waterMarkId){
				this.loading = true
				updateContractBusinessType({id:this.contractBusinessTypeList.id,contractWaterMarkId:waterMarkId.id}).then(response => {
					this.loading = false
					this.$refs.waterPopup.close();
				    this.getList(this.id);
					this.$modal.msgSuccess("修改成功");
				});     
			},
			/** 编辑水印模板 */
			handleEdit(){
				uni.navigateTo({
					url:'/pages/mine/work/busiConfig/watermarkSetting/watermarkSet?id='+this.contractBusinessTypeList.contractWaterMarkId
				})
			},
			/** 弹出水印列表，编辑 */
			handleWater(waterMarkId){
				this.$refs.waterPopup.close();
				uni.navigateTo({
					url:'/pages/mine/work/busiConfig/watermarkSetting/watermarkSet?id='+waterMarkId.id
				})
			},
			/** 水印设置 弹出显示 */
			waterSetting(){
				this.$refs.waterPopup.open('bottom')
				this.getWater()
			},
			/** 水印模板列表 */
			getWater(){
				this.$modal.loading();
				this.queryParams.contractTypeId = this.contractBusinessTypeList.contractTypeId;
				this.queryParams.status=1;
				listByIsSystemAndContractType(this.queryParams).then(response => {
					uni.hideLoading()
				    this.templateList = response.rows;
				});
			},
			/** 修改发起方签署流程  type=0 在线模板  1本地文件 */
			updateInitiation(row,type){
				// 标准合同
				if(type == 0){
					uni.navigateTo({
						url:'./contractSetting?contractSignProcessTemplateId='+row.contractSignProcessTemplateId+'&type='+0+'&id='+row.id
					})
				}
				// 普通合同 
				if(type == 1){
					uni.navigateTo({
						url:'./contractSetting?contractSignProcessFileId='+row.contractSignProcessFileId+'&type='+1+'&id='+row.id
					})
				}
			}, 	
			/** 查询合同类型列表 */
			getContractType() {
			  listByCompanyId().then(response => {
			    this.contractType = [];
				response.data.forEach(item=>{
					this.contractType.push({text:item.name,value:item.id})
				})
			  });
			},
			/** 取消选择管理员 */ 
			manageCancel(item,e){
				// this.form.manageIds = null
			},
			clearSelect(item,e){
				let newArr =  item.manageIds.filter((item1) => {return item1 != e.selected.id});
                this.$modal.loading();
				updateContractBusinessType({id:item.id,manageIds:uniqueArr(newArr).join(",")}).then(response => {
					uni.hideLoading()
					this.$modal.msgSuccess("删除成功");
				});
			},
			/** 确认选择管理员 */ 
			manageConfrim(selected,data){
				let arr = []
				data.forEach(item => {
					if(item.checked == true){
						arr.push(item.id)
					}
				})
            this.$modal.loading();
			updateContractBusinessType({id:selected.id,manageIds:uniqueArr(arr).join(",")}).then(response => {
				uni.hideLoading()
			    this.$modal.msgSuccess("修改成功");
			});	 
			},
			/** 获取合同类型列表 */
			getList(id){
                this.$modal.loading();
				listDTOContractBusinessType(this.queryParams).then(response=>{
					uni.hideLoading()
				    let arr =[];
				    response.rows.forEach(business=>{
				      let manageIdsInt=[]
				      if(!!business.manageIds){
				        let splitString = business.manageIds.split(",");
				        for (let i=0;i<splitString.length;i++){
				          manageIdsInt.push(parseInt(splitString[i]))
				        }
				      }
				      // 初始个人签署
				      if(business.isPersonSign!='-1' && !!business.isPersonSign){
				        business.isPersonSign=business.isPersonSign.split(",");
				      } else {
				        business.isPersonSign=["1"];
				      }
				      // 初始模板个人签署
				      if(!!business.contractTemplateSignPerson){
				        business.contractTemplateSignPerson=business.contractTemplateSignPerson.split(",");
				      } else {
				        business.contractTemplateSignPerson=["1"];
				      }
				      // 添加法人 管理员
				      let legalId = this.$store.getters.staffInfo.legalId;
				      let adminId = this.$store.getters.staffInfo.adminId;
				      if(legalId!=0 && legalId!=adminId){
				        manageIdsInt.push(this.$store.getters.staffInfo.legalId);
				      }
				      manageIdsInt.push(adminId);
				      business.manageIds = uniqueArr(manageIdsInt);
					  // 模板管理员
					  if(business.manageIds != null){
					  business.defaultManage = []
					  let arr = []
					  business.manageIds.forEach(item =>{
						  arr.push(item)
						  setTimeout(()=>{
							business.defaultManage = arr.toString()
						  },100)
					  })  
					  }
					 arr.push(business); 
				    })   
					for(var i=0;i<arr.length;i++){
						if(arr[i].id == id){
							this.contractBusinessTypeList = arr[i]
						}
					}
				})
			},
			// 部门员工数据 
			initDept(){
			  let data = {isCertify: 1, status: 1}
               this.$modal.loading();
			  treeSelectAndStaff(data).then(response => {
				uni.hideLoading()
			    this.deptOptions = response.data;
			  });
			},    
		}
	}
</script>

<style lang="scss" scoped>
	.scroll_view_style {
	  height: 100%;
	}
	.water-title{
		font-size: 32rpx;
		font-weight: 700;
		position: fixed;
		width: 100%;
		top: 15rpx;
		height: 50rpx;
	}
	.popup-content{
		padding: 20rpx;
		height: 800rpx;
		overflow-x: hidden;
		background: #fff;
	}
	.sp-ol{
		font-size:13px;
		color: #888888;
	}
	.waterBtn{
		margin:0 20rpx;
		background: rgb(238, 246, 224);
		padding: 8rpx 22rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
	}
	.text_span{
		color: #000;
	}
	.mb-2{
		display: flex;
		flex-direction: row;
        align-items: flex-start;		
		.name{
			width: 130rpx;
			text-align: right;
			white-space: nowrap;
		}
		.indext{
		}
		
	}
	::v-deep .uni-card .uni-card__content{
		padding: 20rpx 40rpx!important;
	}
	::v-deep .uni-card{
		padding: 0 !important;
	}
	.normarl-tit{
		line-height: 80rpx;
		padding:0 30rpx;
		font-size: 30rpx;
		background: rgb(103, 194, 58);
		border-top-right-radius: 8rpx;
		border-top-left-radius: 8rpx;
		color: #fff;
		width: 100%;
		.setting{
			font-size: 28rpx;
		}
	}
	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-disabled:before{
		color: $uni-color-primary !important;
	}
	page{
		background: $uni-bg-color;
	}
	.manage_view{
		display: flex;
		width: 100%;
		align-items: center;
		margin: 5rpx 0;
		span{color: #666666;}
	}
	.flex_item{
		display: flex;
		margin: 0 0 5rpx 0;
		.check_label{
			font-size: 26rpx;
			color: #666666;
		}
	}
	.status_sign{
		margin: 4rpx 0 10rpx;
		display: flex;
		view:first-child{
			width: 220rpx;
		}
	}
</style>
